<template >
    <div class="myOrder" >
        <ul class="tabs clearfix" >
            <a class="tab" :class="{on: num === 0}" @click="clicktab(0)">所有订单</a>
            <a class="tab" :class="{on: num === 1}" @click="clicktab(1)">待支付订单</a>
            <a class="tab" :class="{on: num === 2}" @click="clicktab(2)">已支付订单</a>
            <a class="tab" :class="{on: num === 5}" @click="clicktab(5)">未评价订单</a>
            <a class="tab" :class="{on: num === 3}" @click="clicktab(3)">已收货订单</a>
            <a class="tab" :class="{on: num === 6}" @click="clicktab(6)">已发货订单</a>
            <a class="tab" :class="{on: num === 4}" @click="clicktab(4)">已取消订单</a>
        </ul>
        <div class="notdata" v-if="notdata">
            <i class="iconfont">&#xe6be;</i>暂时没有数据
        </div>
        <div class="person_info" v-if="!notdata">
            <div class="order_content" v-for="(item, index) in pageObj.order" :key="index">
                <div class="order_title clearfix">

                    <span class="order_num">订单号：{{item.orderid}}</span>
                    <span class="time">下单时间：{{item.gmtCreate}}</span>
                    <span id="sname"><i class="el-icon-s-shop"></i> {{item.goodsname}}</span>
                    <el-link style="float: right;margin-right: 20px;color: #ec7e00" @click="delOrder(item.orderid)">
                        <i class="el-icon-delete">删除订单</i>
                    </el-link>
                    <i class="money" style="float:right;margin-right: 30px;color: red">总计:￥{{item.totalprice}}</i>
                </div>
                <ul class="body_right clearfix" style="margin-top: 10px">
                    <li v-if="item.paytype === 0 && item.paystate===0">微信支付</li>
                    <li v-if="item.paytype === 1 && item.paystate===1">支付宝支付</li>
                    <li class="alipay"
                        v-if="item.paystate === 1"
                        element-loading-background="white"
                    >等待支付 ,剩余<br>
                        <span style="color: red">
<!--                           {{item.shengyuTime}}-->
                          {{LlastTime[index].shengyuTime}}

                        </span>
                    </li>
                    <li class="alipay" v-if="item.paystate === 0">已支付</li>
                    <li class="alipay" v-if="item.sendstate === 2">已收货</li>
<!--                    <li class="alipay" style="color: #d51423" v-if="item.state === 3">订单已失效</li>-->
                    <li class="alipay" v-if="item.paystate ===2&& item.isDeleted ===1" style="color: #ec7e00">订单已取消</li>

                    <li v-if="item.paystate === 1 ">
<!--                         <a class="go_btn go_pay" @click="choosePaySort(item.code)">-->
                        <a class="go_btn go_pay" @click="choosePaySort(item.orderid)">
                            继续支付
                        </a>
                        <a @click="quxiao(item.orderid)"class="cancel" style="cursor: pointer">取消订单</a>

                    </li>
                </ul>
                <div class="order_body clearfix">



                    <div class="body_left clearfix" v-for="(items,index) in item.list" :key="index">
                        <div v-if="items.img" style="height: 100px">
                            <img :src="items.img" alt=""
                                 style="width: 192px;height: 108px;display: inline-block;float: left">
                            <div style="margin-top: 0px;margin-left: 220px">
                                <div style="color: brown;font-size: 16px;font-family: 幼圆">
                                    商品名称:{{items.goodsname}}
                                </div>
                                <div id="goumaishuliang">
                                    购买数量:{{items.goodsnum}}
                                </div>
                            </div>
                        </div>


                        <div v-if="item.paystate===0 && item.remarkstate===1 && item.sendstate!=0" :to="{name: 'DetailId',params:{id:items.goodsid}}">
                            <div style="float:right;margin-left: 356px;margin-top: -116px;">

                                <el-button type="info" plain style="margin-right: 39px;" @click="addComment(items)">点我去评论</el-button>
                            </div>
                        </div>


                        <div v-if="item.sendstate==0" :to="{name: 'DetailId',params:{id:items.goodsid}}">
                            <div style="float:right;margin-left: 356px;margin-top: -116px;">
                                <el-button type="info" plain style="margin-right: 39px;" @click="shouhuo(items)">立即收货</el-button>
                            </div>
                        </div>

                        <div>
                            <el-divider id="xian"></el-divider>
                        </div>
                    </div>


                </div>
            </div>
            <!--微信支付-->
            <el-dialog
                    @close="closeWx"
                    title="收银台"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <div style="text-align: center">
                    <p>微信支付 {{weixinPay.price}}元</p>
                    <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
                        <vue-qr
                                :text="weixinPay.codeUrl"
                                :margin="0"
                                colorDark="green"
                                :logoSrc="require('/src/assets/img/wx.jpg')"
                                colorLight="#fff"
                                :size="200">
                        </vue-qr>
                    </div>
                </div>
                <el-divider></el-divider>
                <div style="font-size: 13px">
                    提示:<br>
                    支付成功前请勿手动关闭页面<br>
                    二维码两小时内有效,请及时扫码支付<br>
                </div>

            </el-dialog>
            <!--支付宝支付弹出层-->
            <el-dialog
                    @close="closeAli"
                    title="支付页面"
                    :visible.sync="dialogVisible2"
                    width="30%">
                <div style="text-align: center" >
                    <p>支付宝支付{{payResult.price}}元</p>
                </div>
                <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin:0px auto;">
                    <vue-qr
                            style="padding-left:10px "
                            :text="payResult.codeUrl"
                            :margin="0"
                            colorDark="blue"
                            :logoSrc="require('/src/assets/img/ali.png')"
                            colorLight="#fff"
                            :size="200">
                    </vue-qr>
                </div>
                <el-divider></el-divider>
                <div style="font-size: 13px">
                    提示:<br>
                    支付成功前请勿手动关闭页面<br>
                    二维码两小时内有效，请及时扫码支付<br>
                </div>
            </el-dialog>
            <!--选择支付类型的弹出层-->
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible3"
                    width="40%"
                    @close="clearCode"
            >
                <span>
                    <el-button @click="payByAli">
                    <img style="padding: 0" width="200" height="60"
                         src="">
                </el-button>
                <el-button @click="payByWx">
                    <img width="200" height="60"
                         src="">
                </el-button>
                    <!--<el-button type="success" @click="payByWx">微信支付</el-button>
                    <el-button type="primary" @click="payByAli">支付宝支付</el-button>-->
                </span>
            </el-dialog>
            <!--添加评论-->
            <el-dialog
                    title="编辑评论"
                    :visible.sync="addcommentDialogVisible"
                    width="50%">
                <span>
                    <span style="float: left"> 我的评分:</span><el-rate style="float: left;margin-left: 50px"
                                                                    v-model="addCommentData.level"></el-rate>
                    <el-input
                            style="margin-top: 20px"
                            type="textarea"
                            :rows="2"
                            placeholder="从多个角度评价宝贝,可以帮助更多想买的人"
                            v-model="addCommentData.content">
                    </el-input>
                    <div style="margin: 20px 0">最多上传三张图片!</div>
                    <el-upload
                            style="float: left;margin-right: 40px"
                            class="avatar-uploader"
                            action="http://192.168.1.98:7000/remark/upload"
                            :show-file-list="false"
                            :headers="token"
                            :on-success="addhandleAvatarSuccess0"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="addCommentData.imgs[0]" v-model="addCommentData.imgs[0]" :src="addCommentData.imgs[0]"
                             class="avatar" alt="">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-upload
                            style="float: left;margin-right: 40px"
                            class="avatar-uploader"
                            action="http://192.168.1.98:7000/remark/upload"
                            :show-file-list="false"
                            :headers="token"
                            :on-success="addhandleAvatarSuccess1"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="addCommentData.imgs[1]" v-model="addCommentData.imgs[1]" :src="addCommentData.imgs[1]"
                                 class="avatar" alt="">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-upload
                            style="float: left;margin-right: 40px"
                            class="avatar-uploader"
                            action="http://192.168.1.98:7000/remark/upload"
                            :headers="token"
                            :show-file-list="false"
                            :on-success="addhandleAvatarSuccess2"
                            :before-upload="beforeAvatarUpload">
                                <img v-if="addCommentData.imgs[2]" v-model="addCommentData.imgs[2]" :src="addCommentData.imgs[2]"
                                     class="avatar" alt="">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <div style="height: 200px"></div>
                    <el-link @click="deleteImg1(0)" icon="el-icon-delete" style="float: left;margin-right: 173px;margin-left: 64px">删除</el-link>
                    <el-link @click="deleteImg1(1)" icon="el-icon-delete" style="float: left;margin-right: 173px;">删除</el-link>
                    <el-link @click="deleteImg1(2)" icon="el-icon-delete" style="float: left">删除</el-link>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addcommentDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCommentConfirm">确 定</el-button>
                </span>
            </el-dialog>
            <!--分页-->
            <div class="pageclass" style="text-align: center">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[3,5,10,15]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
<!--                <el-pagination-->
<!--                        @size-change="handleSizeChange"-->
<!--                        @current-change="handleCurrentChange"-->
<!--                        :current-page="currentPage"-->
<!--                        :page-sizes="[3,5,10,15]"-->
<!--                        :page-size="pageSize"-->
<!--                        layout="total, sizes, prev, pager, next, jumper"-->
<!--                        :total="total">-->
<!--                </el-pagination>-->
            </div>
        </div>
    </div>
</template>

<script>
    import YSide from '@/components/account/Side'
    import DPage from '@/components/Page'
    import vueQr from 'vue-qr'
    import bus from '../../../plugins/bus'
    export default {
        name: "MyOrder",

        data() {
            return {
                token:{"token":localStorage.getItem("token")},
                addCommentData:{
                    level: null,
                    content: "",
                    imgs: ["", "", ""]
                },
                //订单编号
                code:0,
                //选择支付类型的弹出层
                dialogVisible3:false,
                //支付宝支付弹出层
                dialogVisible2:false,
                //查询支付状态定时器
                timer:"",
                //加载
                loading: false,

                //当前显示的页码
                currentPage:1,
                //总条数
                total:0,
                //每页显示的条数
                pageSize:5,

                num: 0,
                showPay: false,
                payData: null,
                notdata: false,
                addcommentDialogVisible:false,
                zhuangtai: {
                    userid:"",
                    paystate:"",
                    remarkstate:"",
                    isdeleted:"",
                    sendstate:"",
                },
                shouHuoForm:{
                    orderid:"",
                    goodsid:"",
                    sendstate:"",
                },
                //用户id
                HuiYuanId: window.sessionStorage.getItem("memberId"),
                timer1: '',
                dialogVisible: false, //弹出框
                //得到响应的结果
                payResult: {
                    codeUrl: "", //二维码的地址
                    code: "", //订单号
                    price: 0.00, //支付的金额
                    logoSrc: "/src/assets/img/wx.jpg" //微信二维码中间小logo
                },
                weixinPay:{
                    codeUrl: "", //二维码的地址
                },
                pageObj: {
                    order: [
                        {
                            //倒计时时间
                            shengyuTime: "",
                            id: '',
                            code: '',
                            orderdate: '',
                            list: [],
                            businessInfo: [],
                            totalmoney: '',
                            paytype: '',
                            state: '',
                            time: '',
                        },
                    ]
                },
                order_no: this.$route.query.out_trade_no,
                alitimer:"",
                weixintimer:"",
                outTimer:"",
                LlastTime:[]
            }
        },
        methods: {
            //评论传值
            pinglun(){

                // this.$zifu=this.pageObj.order[0].orderid
                // console.log("################################################")
                // console.log(this.pageObj.order[0].orderid)
                //
                // console.log(this.$zifu)
            },
            deleteImg1(num){
                this.addCommentData.imgs[num]=''
                this.$forceUpdate()
                this.$message.success("已删除")

            },
            //确认添加评论
            addCommentConfirm(items){
                this.$http.post("remark/remark/insertRemark",this.addCommentData).then(res=>{
                    if (res.data.code===2000){
                        this.$message.success(res.data.msg);
                        this.addcommentDialogVisible = false;
                        this.getMyComments()
                        this.getComments()
                    }
                })
            },
            //添加评论
            addComment(items){
                this.addcommentDialogVisible=true
                this.addCommentData.goodsid = items.id;
                this.addCommentData.shopid = items.shopid;
                this.addCommentData.orderid = items.orderid;
            },beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 5;

                if (!isJPG && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                    return
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                    return
                }
                return (isJPG || isPNG) && isLt2M;
            },
            //图片上传成功后的回调
            addhandleAvatarSuccess0(res, file) {
                this.addCommentData.imgs[0] = res.data;
                this.$forceUpdate()
            },
            //图片上传成功后的回调
            addhandleAvatarSuccess1(res, file) {
                this.addCommentData.imgs[1] = res.data;
                this.$forceUpdate()
            },
            //图片上传成功后的回调
            addhandleAvatarSuccess2(res, file) {
                this.addCommentData.imgs[2] = res.data;
                this.$forceUpdate()
            },
            //微信支付
            payByWx(){
                this.dialogVisible=true
                this.dialogVisible3=false
                clearInterval(this.alitimer)
                this.alitimer=""
                this.$http.get("/order/weixin/createNative/"+this.code).then(res=>{
                    if (res.data.code == 200){
                        this.weixinPay.codeUrl=res.data.data.codeUrl
                        this.weixinPay.price=res.data.data.price
                        //设置一个定时任务，每隔3秒调用一次
                        this.weixintimer = setInterval(() => {
                            this.weixinQueryPayStatus(this.code)
                        }, 3000);
                    }

                })
            },
            //查询微信订单状态
            weixinQueryPayStatus(orderNo){
                this.$http.get("/order/weixin/queryPayState/"+orderNo).then(resp=>{
                    if(resp.data.code==200){
                        this.payResult.codeUrl = ""
                        this.weixinPay.codeUrl = ""

                        //消除定时器
                        clearInterval(this.weixintimer)
                        this.alitimer=null;
                        this.$message.success("支付成功");
                        this.payDialogVisible=false;
                        this.dialogVisible = false
                        this.code=0
                        this.initOrderList()
                    }

                })
            },
            //支付宝支付
            payByAli(){
                this.dialogVisible2 = true
                this.dialogVisible3=false
                clearInterval(this.weixintimer)
                this.weixintimer=""
                this.$http.get("/order/pay/qr/"+this.code).then(resp=> {
                    if (resp.data.code === 2000) {
                        this.payResult.codeUrl = resp.data.data.url;
                        this.payResult.price = resp.data.data.price
                        //设置一个定时任务，每隔3秒调用一次
                        this.alitimer = setInterval(() => {
                            this.aliQueryPayStatus(this.code)
                        }, 3000);
                    }

                })
            },
            //支付宝查询订单状态
            aliQueryPayStatus(code){
                this.$http.get("/order/pay/status/"+code).then(resp=>{
                    if(resp.data.data.msg==="支付成功"){
                        this.payResult.codeUrl = ""
                        this.weixinPay.codeUrl = ""

                        //消除定时器
                        clearInterval(this.alitimer)
                        this.alitimer=null;
                        this.$message.success("支付成功");
                        this.dialogVisible2 = false
                        this.code=0
                        this.initOrderList()
                    }
                })
            },
            //关闭选择支付类型弹出层清除订单编号
            clearCode(){
                // this.code = 0;
                clearInterval(this.weixintimer);
                this.weixintimer = null;
                clearInterval(this.alitimer);
                this.alitimer = null;
            },
            //选择支付类型的方法
            choosePaySort(code){
                this.dialogVisible3=true;
                this.code = code;

            },
            //关闭微信支付页面
            closeWx(){
                //消除定时器
                clearInterval(this.weixintimer);
                this.weixintimer = null;
            },
            closeAli(){
                //消除定时器
                clearInterval(this.alitimer);
                this.alitimer = null;
            },
            //倒计时
            daojishi(i, obj) {
                var that = this
                // 计算剩余时间戳
                var paytime = new Date(obj.time);
                paytime.setMinutes(paytime.getMinutes() + 30)
                let daojishi = setInterval(() => {
                    let residue = paytime - new Date();
                    if (residue >= 0) {
                        // 对每行的剩余时间进行设置
                        obj.lastTime = residue;
                    } else {
                        obj.lastTime = -1;
                        // 清除定时器
                        clearInterval(daojishi);
                    }
                }, 1000);
            },
            //剩余时间格式化
            timeFormat(lastTime,code,index) {
                console.log(lastTime)
                if (lastTime > 1000) {
                    let days = this.addZero(
                        Math.floor(lastTime / 1000 / 60 / 60 / 24)
                    ); //天
                    let hours = this.addZero(
                        Math.floor((lastTime / 1000 / 60 / 60) % 24)
                    ); //时
                    let minutes = this.addZero(
                        Math.floor((lastTime / 1000 / 60) % 60)
                    ); //分
                    let seconds = this.addZero(Math.floor((lastTime / 1000) % 60)); //秒
                    return `${minutes}分钟${seconds}秒`;
                } else if(lastTime<1000 && lastTime >0) {
                    setTimeout(() => {
                        this.$http.post("order/order/updateStateToFailure?code="+code).then(res=>{
                            if (res.data.code===2000) {
                                this.pageObj.order[index].state = 3
                                that.pageObj.pageCurrent = 1;
                                that.initOrderList();
                            }
                        })
                        return "已超时";
                    }, 1000);
                    return "00分钟01秒";
                } else if (lastTime===-1){
                    this.$http.post("order/order/updateStateToFailure?code="+code).then(res=> {
                        if (res.data.code === 2000) {
                            this.pageObj.order[index].state = 3
                            this.pageObj.pageCurrent = 1;
                            this.initOrderList();
                        }
                    })
                }
            },
            // 个位补零
            addZero(d) {
                return parseInt(d) < 10 ? "0" + d : d;
            },
            //删除订单
            delOrder(orderid) {
                this.$http.post("/order/order/deleteOrder/" +orderid).then(res => {
                    if (res.data.code === 200) {
                        this.$message.success(res.data.msg);
                        this.pageObj.pageCurrent = 1;
                        this.initOrderList();
                    }
                })
            },

            queryPayStatus() {
                //继续支付
                var that = this;
                this.$http.get("order/payLog/paystatus/" + this.payResult.code).then(r => {
                    if (r.data.code === 2000) {
                        clearInterval(this.timer);
                        //如果支付成功，清除定时器
                        that.$message.success(r.data.msg);
                        //消除定时器
                        clearInterval(this.timer);
                        that.timer = null;
                        that.dialogVisible = false;
                        that.dialogVisible2 = false;
                        that.dialogVisible3 = false;
                        //刷新界面
                        that.initOrderList();
                        //that.$router.go(0);
                        //跳转到课程详情页面观看视频
                        // that.$router.push({path: '/DetailId/:id' + that.payResult.course_id})
                    }
                })
            },
            pay(item) {
                this.payData = item;
                this.showPay = true;
            },
            //头部选择的按钮
            clicktab(int) {
                this.num = int;
                this.pageObj.pageCurrent = 1;
                this.pageObj.pageSize = 5;
                this.pageObj.totalPage = '',
                this.getOrderList(int);
            },
            //监听分页的触发
            getPage: function (int) {
                this.pageObj.pageCurrent = int;
                this.initOrderList();
            },

            //订单数据重载，，判断要查询所有还是查询支付或未支付订单
            getOrderList(int) {
                if (int === 1) {//待支付订单
                    this.zhuangtai.paystate = 1;
                    this.zhuangtai.isdeleted=0;
                    this.zhuangtai.sendstate=-1;
                    this.zhuangtai.remarkstate=-1
                } else if (int === 2) {//已支付订单
                    this.zhuangtai.paystate = 0;
                    this.zhuangtai.isdeleted= 0;
                    this.zhuangtai.sendstate=-1;
                    this.zhuangtai.remarkstate=-1
                } else if (int === 0) {//查询所有
                    this.zhuangtai = {};
                }  else if (int === 4) {//已取消订单
                    this.zhuangtai.isdeleted = 1;
                    this.zhuangtai.paystate =2;
                    this.zhuangtai.sendstate=-1;
                    this.zhuangtai.remarkstate=-1
                } else if (int === 5) {//未评价订单
                    this.zhuangtai.remarkstate = 1;
                    this.zhuangtai.paystate =0;
                    this.zhuangtai.isdeleted=-1;
                    this.zhuangtai.sendstate=2;
                } else if(int === 3){//已收货的订单
                    this.zhuangtai.remarkstate = 1;
                    this.zhuangtai.paystate =0;
                    this.zhuangtai.isdeleted=0;
                    this.zhuangtai.sendstate=2;
                }else if(int === 6){//已发货订单
                    this.zhuangtai.remarkstate = 1;
                    this.zhuangtai.paystate =0;
                    this.zhuangtai.isdeleted=0;
                    this.zhuangtai.sendstate=0;
                }

                this.initOrderList()
            },

            //获取订单信息
            initOrderList() {
                this.notdata = false;
                var that = this;
                this.$http.post("/order/order/userSelect?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.zhuangtai).then(function (resp) {
                    console.log(resp)
                    that.pageObj.order = resp.data.data.list;
                    that.total = resp.data.data.total;

                    for (let i = 0; i < that.pageObj.order.length; i++) {
                        if (that.pageObj.order[i].paystate===1 ){
                            that.LlastTime.push({shengyuTime:""})
                            that.outTimer = setInterval(()=>{that.jiSuanOutTime()},200)
                        }
                    }


                    //当前选择待支付订单页面时创建定时器---每秒计算剩余时间
                    // if (that.num==1 && that.outTimer==""){
                    //     that.outTimer = setInterval(()=>{that.jiSuanOutTime()},200)
                    //     for (let i = 0; i < that.pageObj.order.length; i++) {
                    //         that.LlastTime.push({shengyuTime:""})
                    //     }
                    // }
                })
            },

            //计算待支付订单的过期时间
            jiSuanOutTime(){

                var that = this;
                // if (that.num==1){
                    let nowTime = new Date();
                    // console.log("-----------------")
                    // console.log(that.pageObj.order)
                    if (that.pageObj.order.length!=0){
                        for (let i = 0; i < that.pageObj.order.length; i++) {
                            if (that.pageObj.order[i].paystate===1 ) {
                                // console.log("===========")
                                // console.log(that.pageObj.order[i].gmtCreate)
                                //过期时间 = 待支付订单的创建时间+一分钟(30分钟)
                                let outTime = new Date(that.pageObj.order[i].gmtCreate).getTime() + 60 * 1000;
                                // console.log("过期时间++++++++++++")
                                // console.log(outOut)
                                //剩余时间 = 过期时间 - 现在的时间
                                //   that.pageObj.order[i].shengyuTime = outTime - nowTime;
                                //剩余时间 = 过期时间 - 现在的时间
                                if (outTime - nowTime >= 1000) {
                                    let min = Math.floor((outTime - nowTime) / 1000 / 60);
                                    let s = Math.floor(((outTime - nowTime) / 1000) % 60);

                                    // let shegnyuTime={shengyuTime: ""}
                                    // shegnyuTime.shengyuTime = min +"分"+s+"秒"
                                    // that.LlastTime[i]=shegnyuTime
                                    // let a = {shengyuTime:""}
                                    // that.LlastTime.push(a)
                                    that.LlastTime[i].shengyuTime = min + "分" + s + "秒"

                                    console.log("剩余时间------")
                                    console.log( min +"分"+s+"秒")
                                } else {
                                    if (that.num==1){
                                        that.pageObj.order.splice(i,1)
                                    }else {
                                        that.pageObj.order[i].paystate =2
                                        that.pageObj.order[i].isDeleted =1
                                    }
                                    // this.$http.post("/order/order/quXiaoOrder/" + that.pageObj.order[i].orderId).then(function (resp) {
                                    //     if (resp.data.code === 200) {
                                    //         that.initOrderList();
                                    //     } else {
                                    //         that.$message.error(resp.data.msg);
                                    //     }
                                    //     //that.$router.go(0);
                                    // })

                                    clearInterval(that.outTimer)
                                    that.outTimer=""
                                    that.clearCode()


                                }
                            }

                        }
                    }else {
                        clearInterval(that.outTimer)
                        that.outTimer=""
                    }
                // }



            },

            //用户点击收货按钮，收货
            shouhuo(items){
                var that = this;
                that.shouHuoForm.goodsid=items.goodsid;
                that.shouHuoForm.orderid=items.orderid;
                that.shouHuoForm.sendstate=2;
                this.$http.post("/order/order/receiving",this.shouHuoForm).then(resp=>{
                    that.$message.success("您已成功收货！！！期待您的好评");
                    this.initOrderList();
                })
            },
            //点击处理页码大小变动时候触发的事件
            handleSizeChange(val) {
                //点击切换每页显示的条数时，把每页的显示条数的值重新赋值给pageSize
                this.pageSize=val;
                this.initOrderList();
            },
            //点击处理当前页变动时候触发的事件。
            handleCurrentChange(val) {
                //点击到第几页是，把当前是第几页的值重新赋值给currentPage
                this.currentPage=val;
                this.initOrderList();
            },
            //取消支付
            quxiao(orderid) {
                this.$confirm(`确定要取消订单吗?`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that = this;
                    this.$http.post("/order/order/quXiaoOrder/" + orderid).then(function (resp) {
                        console.log(resp)
                        if (resp.data.code === 200) {
                            that.$message.success(resp.data.msg);
                            that.initOrderList();
                        } else {
                            that.$message.error(resp.data.msg);
                        }
                        that.pageObj.pageCurrent = 1;
                        that.initOrderList();
                        //that.$router.go(0);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消支付失败'
                    });
                })


            }

        },

        computed:{
        },
        mounted() {
            this.getOrderList();
            this.loading = true;
        },
        components: {
            YSide,
            DPage,
            vueQr
        }

    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    #daojishi {
        height: 60px;
        width: 175px;
        float: right;
        margin-top: 100px;
        margin-right: -182px;
    }

    #goumaishuliang {
        color: lightslategray;
        font-size: 16px;
        margin-top: 68px;
        margin-left: 377px;
        float: left;
    }

    #xian {
        display: block;
        height: 1px;
        width: 720px;
        margin: 24px 0;
    }

    #sname {
        margin-left: 50px;
    }


    #goodsname {
        margin-left: 15px;
        margin-top: -10px;
    }

    #img {
        width: 50px;
        height: 50px;
    }

    .person_info {
        padding: 25px;
        min-height: 400px;
    }

    .order_content {
        border-bottom: 2px solid rgba(245, 245, 245, 1);
        margin-top: 20px;
        position: relative;

        &:first-child {
            margin-top: 0;
        }
    }

    .order_title {
        line-height: 36px;
        padding-left: 20px;
        background: rgba(245, 245, 245, 1);
        font-size: 14px;
        color: #999;

        .order_type {
            margin-right: 10px;
            color: #0099FF;
        }

        .time {
            margin-left: 30px;
        }
    }

    .order_body {
        margin: 15px 0;
    }

    .body_left {
        padding: 0 20px;
        width: 740px;

        // position: relative;
        .img_box {
            width: 120px;
            height: 59px;
            display: inline-block;
        }

        img {
            width: 120px;
            height: 59px;
        }

        p {
            // position: absolute;
            width: 336px;
            white-space: inherit;
            margin-left: 10px;
            // left: 160px;
            font-size: 14px;
            color: #999;
        }
    }

    .body_right {
        float: right;

        li {
            float: left;
            height: 50px;
            width: 100px;
            text-align: center;
            border-left: 2px solid rgba(245, 245, 245, 1);
            font-size: 14px;
            color: #999;

            &.alipay {
                color: #0099FF;
            }

            &.money {
                color: #D51423;
            }

            .cancel {
                display: block;
                text-align: center;
                color: #999;

                &:hover {
                    color: #D51423;
                }
            }

            .go_btn {
                display: block;
                width: 76px;
                height: 30px;
                margin-left: 10px;
                line-height: 30px;
                background: #fff;
                border-radius: 6px;
                font-size: 14px;
                cursor: pointer;
                color: #999;
                border: 1px solid #999;

                &.go_pay {
                    border-color: orange;
                    color: orange;
                }

                &:hover {
                    color: #D51423;
                    border-color: #D51423;
                }
            }
        }
    }

    .notdata {
        text-align: center;
        padding: 60px 0;
        font-size: 30px;
        color: #999;
        min-height: 400px;

        i {
            font-size: 30px;
            padding-right: 12px;
        }
    }

    .page {
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
